<div>
    <div style="padding:10px">
        <div style="padding-bottom: 10px;">
            <el-row>
                <el-col :span= "5">
                    <!--div style="padding-left:20px">
                        <el-slider v-model="diffid" :max="3" :min="0" :format-tooltip="showdiffrange" :marks="marks"
                            @input="changecolor">
                        </el-slider>
                    </div-->
                        <el-select v-model="diffid" placeholder="请选择准度" :disabled="loading || showdetail">
                            <el-option :key="0" :value="0" label="Easy"></el-option>
                            <el-option :key="1" :value="1" label="Normal"></el-option>
                            <el-option :key="2" :value="2" label="Hard"></el-option>
                            <el-option :key="3" :value="3" label="Expert"></el-option>
                            <el-option :key="4" :value="4" label="Special"></el-option>
                        </el-select>
                </el-col>
                <el-col :span="19">
                    <div style="text-align: right;">
                        <span style="width: 200px;display: inline-block;margin-right: 10px;">
                            <el-input v-model="bestdoriid" placeholder="Bestdori谱面id" @input="inputchange($event)"
                                @keyup.enter.native="getbestdorichart">
                            </el-input>
                        </span>
                        <el-button type="primary" @click="getbestdorichart">获取</el-button>
                        <el-button type="danger" @click="clearinput">重置</el-button>
                    </div>
                </el-col>
            </el-row>
            <div style="padding-bottom: 10px;"></div>
            <el-input type="textarea" :rows="10" v-model="inputstr" placeholder="请输入bestdori谱面"
                @input="inputchange($event)" v-loading="loading" @clear="clearinput" :disabled="showdetail" clearable>
            </el-input>
        </div>
        <el-row>
            <el-button type="primary" @click="analysis(false)" style="width:100%" :disabled="loading || showdetail">分析</el-button>
        </el-row>
    </div>
    <div v-show="showdetail">
        <el-divider>
            <span style="font-size: x-large;">谱面分析（仅供参考）</span>
        </el-divider>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-card :body-style="{ padding: '5px'}" shadow="hover">
                    <div style="text-align: center;padding-bottom: 10px;">
                        <el-divider>Time</el-divider>
                        <span style="font-size: xx-large;">
                            <span v-if="totaltimesec < 10.0">{{totaltimemin}}'0{{totaltimesec}}</span>
                            <span v-else>{{totaltimemin}}'{{totaltimesec}}</span>
                        </span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card :body-style="{ padding: '5px'}" shadow="hover">
                    <div style="text-align: center;padding-bottom: 10px;">
                        <el-divider>BPM</el-divider>
                        <span style="font-size: xx-large;">
                            <span v-if="bpmlow == bpmhigh">{{bpmlow}}</span>
                            <span v-else>{{bpmlow}}~{{bpmhigh}}</span>
                        </span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card :body-style="{ padding: '5px'}" shadow="hover">
                    <div style="text-align: center;padding-bottom: 10px;">
                        <el-divider>Notes</el-divider>
                        <span style="font-size: xx-large;">{{totalnote}}</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card :body-style="{ padding: '5px'}" shadow="hover">
                    <div style="text-align: center;padding-bottom: 10px;">
                        <el-divider>Hits</el-divider>
                        <span style="font-size: xx-large;">{{totalhitnote}}</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="12">
            <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
                <div style="padding-bottom: 10px;" v-if="leftpercent!=null">
                    <el-divider>
                        <span style="font-size: large;">双手压力分配</span>
                    </el-divider>
                    <div style="padding-bottom: 30px;">
                        <el-col :span="5">
                            <div style="vertical-align: middle;text-align: center;font-size: x-large">
                                <span style="font-size: small;">L</span>
                                <span>{{leftpercent}}%</span>
                            </div>
                        </el-col>
                        <el-col :span="14">
                            <div style="vertical-align: middle;padding-top:10px;">
                                <el-progress :show-text="false" :percentage="calcpercentage2(leftpercent)" :color="returncolor"
                                    :stroke-width="20">
                                </el-progress>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div style="vertical-align: middle;text-align: center;font-size: x-large">
                                <span style="font-size: small;">R</span>
                                <span>{{100-leftpercent}}%</span>
                            </div>
                        </el-col>
                    </div>
                </div>
            </el-col>
            <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
                <div style="padding-bottom: 10px;" v-if="npsdiff!=null">
                    <el-divider>
                        <span style="font-size: large;">NPS（总体密度）</span>
                    </el-divider>
                    <div style="padding-bottom: 30px;">
                        <el-col :span="5">
                            <div style="vertical-align: middle;text-align: center;font-size: x-large">
                                <span>{{totalnps}}</span>
                            </div>
                        </el-col>
                        <el-col :span="14">
                            <div style="vertical-align: middle;padding-top:10px;">
                                <el-progress :show-text="false" :percentage="calcpercentage(npsdiff)" :color="returncolor"
                                    :stroke-width="20">
                                </el-progress>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div style="vertical-align: middle;text-align: center;font-size: x-large">
                                <span style="font-size: small;">LV</span>
                                <span>{{npsdiff}}</span>
                            </div>
                        </el-col>
                    </div>
                </div>
            </el-col>
            <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
                <div style="padding-bottom: 10px;" v-if="hpsdiff!=null">
                    <el-divider>
                        <span style="font-size: large;">HPS（总体压力）</span>
                    </el-divider>
                    <div style="padding-bottom: 30px;">
                        <el-col :span="5">
                            <div style="vertical-align: middle;text-align: center;font-size: x-large">
                                <span>{{totalhps}}</span>
                            </div>
                        </el-col>
                        <el-col :span="14">
                            <div style="vertical-align: middle;padding-top:10px;">
                                <el-progress :show-text="false" :percentage="calcpercentage(hpsdiff)" :color="returncolor"
                                    :stroke-width="20">
                                </el-progress>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div style="vertical-align: middle;text-align: center;font-size: x-large">
                                <span style="font-size: small;">LV</span>
                                <span>{{hpsdiff}}</span>
                            </div>
                        </el-col>
                    </div>
                </div>
            </el-col>
            <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
                <div style="padding-bottom: 10px;" v-if="maxhpsdiff!=null">
                    <el-divider>
                        <span style="font-size: large;">单手最大HPS（单手爆发）</span>
                    </el-divider>
                    <div style="padding-bottom: 30px;">
                        <el-col :span="5">
                            <div style="vertical-align: middle;text-align: center;font-size: x-large">
                                <span>{{maxhps}}</span>
                            </div>
                        </el-col>
                        <el-col :span="14">
                            <div style="vertical-align: middle;padding-top:10px;">
                                <el-progress :show-text="false" :percentage="calcpercentage(maxhpsdiff)" :color="returncolor"
                                    :stroke-width="20">
                                </el-progress>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div style="vertical-align: middle;text-align: center;font-size: x-large">
                                <span style="font-size: small;">LV</span>
                                <span>{{maxhpsdiff}}</span>
                            </div>
                        </el-col>
                    </div>
                </div>
            </el-col>
            <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
                <div style="padding-bottom: 10px;" v-if="maxspddiff!=null">
                    <el-divider>
                        <span style="font-size: large;">最大位移速度</span>
                    </el-divider>
                    <div style="padding-bottom: 30px;">
                        <el-col :span="5">
                            <div style="vertical-align: middle;text-align: center;font-size: x-large">
                                <span>{{maxspd}}</span>
                            </div>
                        </el-col>
                        <el-col :span="14">
                            <div style="vertical-align: middle;padding-top:10px;">
                                <el-progress :show-text="false" :percentage="calcpercentage(maxspddiff)" :color="returncolor"
                                    :stroke-width="20">
                                </el-progress>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div style="vertical-align: middle;text-align: center;font-size: x-large">
                                <span style="font-size: small;">LV</span>
                                <span>{{maxspddiff}}</span>
                            </div>
                        </el-col>
                    </div>
                </div>
            </el-col>
            <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
                <div style="padding-bottom: 10px;" v-if="maxfpsfrontdiff!=null">
                    <el-divider>
                        <span style="font-size: large;">粉键 - 前接</span>
                    </el-divider>
                    <div style="padding-bottom: 30px;">
                        <el-col :span="5">
                            <div style="vertical-align: middle;text-align: center;font-size: x-large">
                                <span>{{maxfpsfront}}</span>
                            </div>
                        </el-col>
                        <el-col :span="14">
                            <div style="vertical-align: middle;padding-top:10px;">
                                <el-progress :show-text="false" :percentage="calcpercentage(maxfpsfrontdiff)" :color="returncolor"
                                    :stroke-width="20">
                                </el-progress>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div style="vertical-align: middle;text-align: center;font-size: x-large">
                                <span style="font-size: small;">LV</span>
                                <span>{{maxfpsfrontdiff}}</span>
                            </div>
                        </el-col>
                    </div>
                </div>
            </el-col>
            <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
                <div style="padding-bottom: 10px;" v-if="maxfpsbackdiff!=null">
                    <el-divider>
                        <span style="font-size: large;">粉键 - 接后</span>
                    </el-divider>
                    <div style="padding-bottom: 30px;">
                        <el-col :span="5">
                            <div style="vertical-align: middle;text-align: center;font-size: x-large">
                                <span>{{maxfpsback}}</span>
                            </div>
                        </el-col>
                        <el-col :span="14">
                            <div style="vertical-align: middle;padding-top:10px;">
                                <el-progress :show-text="false" :percentage="calcpercentage(maxfpsbackdiff)" :color="returncolor"
                                    :stroke-width="20">
                                </el-progress>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div style="vertical-align: middle;text-align: center;font-size: x-large">
                                <span style="font-size: small;">LV</span>
                                <span>{{maxfpsbackdiff}}</span>
                            </div>
                        </el-col>
                    </div>
                </div>
            </el-col>
            <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
                <div style="padding-bottom: 10px;" v-if="newdiffcalc!=null">
                    <el-divider>
                        <span style="font-size: large;">白蓝物量节拍公式 by 金坷垃jin</span>
                    </el-divider>
                    <div style="padding-bottom: 30px;">
                        <el-col :span="5">
                            <div style="vertical-align: middle;text-align: center;font-size: x-large">
                                <span>-</span>
                            </div>
                        </el-col>
                        <el-col :span="14">
                            <div style="vertical-align: middle;padding-top:10px;">
                                <el-progress :show-text="false" :percentage="calcpercentage(newdiffcalc)" :color="returncolor"
                                    :stroke-width="20">
                                </el-progress>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div style="vertical-align: middle;text-align: center;font-size: x-large">
                                <span style="font-size: small;">LV</span>
                                <span>{{newdiffcalc}}</span>
                            </div>
                        </el-col>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div style="margin-bottom: 50px;">
            <p></p>
        </div>
    </div>
    <div>
        <el-divider><span style="font-size: x-large;">使用说明</span></el-divider>
        <div style="font-size: 13px;">
            <p>Beta 1.1.1 版，运算结果仅供参考，不代表曲目的最真实难度。</p>
            <p>请选择正确的难度分级，否则将会造成较大的误差</p>
            <p>量程：Easy: 5~12 Normal: 11~16 Hard: 16~23 Expert: 22~29，超出量程时显示估计值</p>
            <p>警告：请选择正确的难度分级，否则将会造成较大的误差</p>
            <p>如在使用过程中出现任何问题，联系作者</p>
        </div>
        <el-collapse>
            <el-collapse-item title="自定义谱面（仅支持bestdori社区谱面格式）">
                <p>1. 在大输入框中输入bestdori格式的谱面</p>
                <p>2. 拖动输入框左下角的滑块，选择您的谱面的分级：Easy/Normal/Hard/Expert，默认Expert</p>
                <p>3. 点击分析按钮，即可得到分析结果</p>
            </el-collapse-item>
            <el-collapse-item title="社区谱面">
                <p>在右上角的小输入框中输入想要获取的bestdori谱面（不包括官谱），点击获取按钮，即可获得分析。</p>
            </el-collapse-item>
            <el-collapse-item title="注">
                <p>若想分析其它谱面，点击清空，再输入新的谱面。或者在右下角的小输入框中输入新的想分析的bestdori社区谱面</p>
                <p>Expert难度运算结果可能与真实难度差异较大，谱面难度的精确度一般为±1级</p>
                <p>建模的时候忽略了锁手和卡手配置影响难度的情况，若出现上述配置一般难度会偏低2~3级（加了分配手的代码也没用）</p>
            </el-collapse-item>
        </el-collapse>
    </div>
</div>